<template>
    <div class="main-content">
         <div class="count-infor">
             <div class="title">卡券查看详情 (单位：张)</div>
             <div class="infor">
                <span>
                    <p>总数</p>
                    <span>{{query.allTotal}}</span>
                </span>
                <span>
                    <p>已使用</p>
                    <span>{{query.useNum}}</span>
                </span>
                <span>
                    <p>未使用</p>
                    <span>{{query.noUseNum}}</span>
                </span>
                <span>
                    <p>已作废</p>
                    <span>{{query.rubbishData}}</span>
                </span>
                <span>
                    <p>未发放</p>
                    <span>{{query.noGrantNum}}</span>
                </span>
             </div>
             
        </div>
        <!-- <div class="count-infor"><span>总数：{{query.allTotal}}</span><span>已使用：{{query.useNum}}</span><span>未使用：{{query.noUseNum}}</span><span>已作废：{{query.rubbishData}}</span><span>未发放：{{query.noGrantNum}}</span></div> -->
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="75px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="卡券码" prop="cardNum">
                            <el-input v-model="query.cardNum" placeholder="请输入卡券码" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="使用状态" prop="status">
                            <el-select v-model="query.status" placeholder="请选择" style="width:100%" >
                                <el-option v-for="(item,index) in statusData" :key="index" :label="item.name" :value="item.value"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>                   
                    <el-col :span="8">
                        <el-button type="primary" class="top-btn" @click="searchData">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button type="default" @click="goToExtendLot()">批量发放</el-button>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="学校名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.schoolName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="卡券名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.serviceName}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="卡券码" width="160px" align="center">
                    <template scope="scope">
                        <span>{{scope.row.cardCoupons}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="购买时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.createTime | dateFilter}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="使用状态" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.usingState=='0'">未使用</span>
                        <span v-if="scope.row.usingState=='1'">已使用</span>
                        <span v-if="scope.row.usingState=='2'">已作废</span>
                    </template>
                </el-table-column>

                 <el-table-column label="持有人" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.usingName?'--':scope.row.usingName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="所在班级" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.className?'暂无':scope.row.className}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="使用时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.useTime | dateFilter}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="开通时长" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.useFulLife?'暂无':scope.row.useFulLife+'个月'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template scope="scope">
                        <span v-if="scope.row.usingState=='1'">暂无</span>                        
                        <el-button type="text" v-if="scope.row.usingState=='0'" class="btn-success" 
                        @click="goToExtend(scope.row)">发放</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <cardToExtend @queryData="queryData" @getCardNums="getCardNums" :extendData="extendData"></cardToExtend>
        <oneChose @queryData="queryData" @getCardNums="getCardNums" :oneData="oneData"></oneChose>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import cardToExtend from './cardToExtend';
    import oneChose from './oneChose';
    import { mapState, mapActions } from 'vuex';
    import { listCardCouponsByOrgid, getCardNumsBySchoolType } from 'api/cardCoupons';

    export default {
        name: 'cardServerList',
        components: { Levelbar, TableLayout, cardToExtend, oneChose},
        data() {
            return { 
                statusData: [
                    {
                        value: '',
                        name: '全部'
                    },
                    {
                        value: 0,
                        name: '未使用' 
                    },
                    {
                        value: 1,
                        name: '已使用' 
                    },
                    {
                        value: 2,
                        name: '已作废' 
                    }],
                loading: true,  
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    cardNum: '', // 卡券码
                    status: '', // 卡券状态
                    allTotal: '', // 总量
                    useNum: '', // 已使用量
                    noUseNum: '', // 未使用量
                    noGrantNum: '', // 未发放
                    rubbishData: '' // 作废的数据
                },
                extendData: {
                    dialogExtend: false,
                    schoolId: this.$route.params.schoolId,
                    schoolName: this.$route.params.sSchoolName,
                    serviceId: this.$route.params.serviceId,
                    serviceName: this.$route.params.sServiceName,
                    pId: '',
                    orgUserId: '',
                    orgUserName: ''
                },
                oneData: {
                    dialogExtend: false,
                    schoolId: this.$route.params.schoolId,
                    schoolName: '',
                    serviceId: '',
                    serviceName: '',
                    pId: '',
                    orgUserId: '',
                    orgUserName: ''
                }

            }
        },
        created() {
            this.queryData();
            this.getCardNums();
            console.log(this.$route.params, 'this.$route.params')
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        filters: {
            dateFilter(val) {
                if (val) {
                    return val.substring(0, 11)
                } else {
                    return '暂无'
                }               
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            searchData() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            // 卡券查看列表
            queryData() {
                this.loading = true;
                listCardCouponsByOrgid(
                    this.pageQuery.currentpage, 
                    this.config.pageSize,
                    this.$route.params.serviceId,
                    this.$route.params.schoolId,
                    this.query.cardNum,
                    this.query.status).then(response => {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    });
            },
            // 卡券类型总数统计(总数,已使用,未使用,已作废,未发放)
            getCardNums() {              
                getCardNumsBySchoolType(this.$route.params.schoolId).then(response => {
                    response.data.content.map(item => {
                        if (item.p_id == this.$route.params.serviceId) { // 通过遍历对比服务ID和数据中的p_id，来获取想要的数据
                            this.query.allTotal = item.allTotal;
                            this.query.noUseNum = item.noUseNum;
                            this.query.useNum = item.useNum;
                            this.query.noGrantNum = item.noGrantNum;
                            this.query.rubbishData = item.rubbishData;
                        }
                    })
                })
            },
            // 批量发放卡券
            goToExtendLot() {
                this.extendData.dialogExtend = true;
                // this.extendData.schoolName = row.schoolName;
                // this.extendData.serviceId = row.serviceId;
                // this.extendData.serviceName = row.serviceName;
                // this.extendData.orgUserId = row.orgUserId;
                // this.extendData.orgUserName = row.orgUserName;
                // this.extendData.pId = row.pId;
            },
            // 单个发放卡券
            goToExtend(row) {
                this.oneData.dialogExtend = true;
                this.oneData.schoolName = row.schoolName;
                this.oneData.serviceId = row.serviceId;
                this.oneData.serviceName = row.serviceName;
                this.oneData.orgUserId = row.orgUserId;
                this.oneData.orgUserName = row.orgUserName;
                this.oneData.pId = row.pId;
            }
        }

    }
</script>

<style lang="scss" scoped>
.count-infor{
    padding: 0 20px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    font-size:14px;
    margin-bottom:20px;
    padding:20px 20px;
    .infor{
        padding-left:120px;
    }
   .title{
        border-left:4px solid #ff5e2c;
        padding-left:15px;
        height: 16px;
        line-height: 16px;
        margin-bottom:20px;
   }
   
    span{
        display:inline-block;
        padding:0px 30px;
        color:#333;
        text-align: center;
        p{
            color:#999;
        }
        span{
            padding-top:10px;
        }

    }
}
</style>

